<template>
	<van-skeleton title avatar :row="4" :loading="loading">
		<van-pull-refresh v-model="loading" @refresh="onRefresh"></van-pull-refresh>
		<van-nav-bar class="nav-bar" :title="user.nickname" left-text="返回" left-arrow @click-left="onClickLeft" />
		<div class="div">
			<!--  -->
			<van-image class="dishes-image" width="100%" height="200px" fit="cover" lazy-load
				:src="user.backgroundPictureUrl" alt="用户背景图片" /><br />
			<!-- @click="toDishesDetails(item.id)" -->
			<van-card class="van-card" v-for="(item) in evaluationArray" :key="item">

				<template #tags>
					<van-image class="dishes-image" round width="60px" height="60px" fit="cover" lazy-load
						:src="user.profilePhotoUrl" alt="用户头像" />
					<span>{{user.nickname}}</span><span>日期 {{item.evaluationDate}}</span>


					<div>
						商家
						<van-rate v-model="item.evaluationScore" readonly :size="20" color="#ffd21e" icon="star"
							void-icon="star" void-color="#eee" />
						<p>51分钟送达</p>
						<p class="p-span"><span>口味:{{item.evaluationScore}}星</span><span>包装:{{item.evaluationScore}}星</span><span>配送:{{item.evaluationScore}}星</span></p>
						<p title="评价内容">{{item.evaluationDescribe}}</p>
					</div>
					


					<van-image class="videoOrImageUrlOfTheReview" width="150px" height="150px" fit="cover" lazy-load
						v-if="item.videoOrImageUrlOfTheReview !=''" :src="item.videoOrImageUrlOfTheReview" alt="评价图片" />
					<br />

					<p @click="toShopDishesList(item.shop.shopId)" class="p-van-card">
						<!-- class="dishes-image" -->
						<van-image class="shop-head-portrait" width="60px" height="60px" fit="cover" lazy-load
							:src="item.shop.headPortrait" alt="店铺头像" /><span>{{item.shop.shopName}}</span>

					</p>
					<div class="div-box">
						<div>
							<span>浏览数 {{item.viewed}} </span>
						</div>
						<div>
							<van-button @click="like()" round block class="button">赞</van-button>
							<van-button @click="additionalEvaluation()" round block class="button">追评</van-button>
							<van-button @click="more()" round block class="button">...</van-button>
						</div>
					</div>
				</template>
			</van-card>
			<router-view />
			<van-tabbar route>
				<van-tabbar-item replace to="/waimaiindex" icon="home-o">首页</van-tabbar-item>
				<van-tabbar-item icon="diamond-o" badge="99+">会员</van-tabbar-item>
				<van-tabbar-item replace to="/" icon="label-o" badge="99+">订单</van-tabbar-item>
				<van-tabbar-item icon="apps-o">更多</van-tabbar-item>
			</van-tabbar>
		</div>
	</van-skeleton>


</template>
<script>
	// import qs from 'qs'
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		Toast
	} from 'vant';
	export default {
		name: "我的评价",
		setup() {
			const loading = ref(true);
			onMounted(() => {
				loading.value = false;
			});
			return {
				loading,
			};
		},
		data() {
			return {
				evaluationArray: [],
				user: {
					profilePhotoUrl: '',
					backgroundPictureUrl: '',
				},
				shop: {

				},
				userId: 1,
				active: 0,
			}
		},
		mounted() { //挂载之后执行的方法
			this.getEvaluationList();
		},
		methods: {
			toShopDishesList(shopId){
				console.log("shopId="+shopId);
				this.$router.push({
					path:'/shopDishesList',
					query:{
						id:shopId
					}
				})
			},
			like() {
				console.log("like");
			},
			additionalEvaluation() {
				console.log("additionalEvaluation");
			},
			more() {
				console.log("more");
			},
			onMounted() {
				this.loading = false;
			},
			onRefresh() {
				setTimeout(() => {
					window.location.reload()
					// this.getShopInfoList();
					Toast('刷新成功');
					this.loading.value = false;
					this.count.value++;
				}, 1000);
			},
			getEvaluationList() {
				this.$axios.get('/evaluation/page/list/' + this.userId)
					.then(res => {
						// console.log("data=" + res)
						this.evaluationArray = res.result.data.records;
						console.log("shop.id="+this.evaluationArray[0].shop.id);
						this.user = res.result.data.records[0].user;
						console.log("backgroundPictureUrl=" + this.user.backgroundPictureUrl);
						// console.log("shopName=" + this.dishesArray[10].shop.shopName)
					}).catch(error => {
						console.log("error:" + error)
					})
			},
			onClickRight() { //点击发布评价
				console.log("按钮");
				// this.entity.userId = this.$route.query.userId;
				// this.entity.dishesId = this.$route.query.dishesId;

				// this.$axios.post('/evaluation/insert', qs.stringify(this.entity))
				// 	.then(res => {
				// 		// console.log("data=" + res)
				// 		if (res.result.data) {
				// 			Toast.success('评价成功');
				// 			this.$router.push({
				// 				path: '/ordersList'
				// 			})

				// 		} else {
				// 			Toast.fail('评价失败');
				// 			Notify({
				// 				type: 'success',
				// 				message: '通知内容',
				// 				position: 'center',
				// 			});
				// 		}
				// 	}).catch(error => {
				// 		Toast.fail(error);
				// 		Notify({
				// 			type: 'danger',
				// 			message: "error : " + error,
				// 		});
				// 	})
			},
			onClickLeft() {
				history.back()
			},


		}
	}
</script>
<style scoped>
	.div {
		margin-bottom: 60px;

	}

	.nav-bar {
		width: 100%;
		position: fixed;
	}

	span {
		/* 上右下左 */
		margin: 10px 0px 0px 10px;
	}

	.videoOrImageUrlOfTheReview {}

	.shop-head-portrait {
		/* float: left; */
		/* display: inline-block; */
		/* width: 600px; */
	}

	.van-card {
		margin: 30px 0px 30px 0px;
		--van-card-background-color: var(--van-gray-0);
		/* border: 1px red solid; */
	}

	.p-van-card {
		margin: 30px 0px 30px 0px;
		height: 80px;
		background-color: var(--van-gray-1);
	}
	.p-span>span{
		margin: 2px  20px 2px 0px;
	}
	.div-box {
		display: flex;
		width: 100%;
		height: 40px;
		/* flex-direction: row-reverse; */
		justify-content: space-between;
		align-items: center;
	}

	.button {
		display: inline-block;
		width: 60px;
	}
</style>
